<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <meta content="telephone=no,email=no,address=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta name="renderer" content="webkit" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>feiling</title>
    <link rel="stylesheet" href="../asset/vendor/video/video-js.min.css">
    <link rel="stylesheet" href="../asset/css/main.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../asset/vendor/html5shiv.min.js"></script>
    <script src="../asset/vendor/respond.min.js"></script>
    <script>
        alert("您的浏览器版本过低请升级！");
        location.href = "http://outdatedbrowser.com/zh-cn";
    </script>
    <![endif]-->
</head>
<body>
<div class="home">
    <div class="home-cont">
        <div class="logo">
            <img src="../asset/images/basic/logo.png" alt="">
        </div>
        <div class="nav" id="homeNav">
            <ul>
                <li class="special first">
                    <a href="index.html">
                        <img src="../asset/images/basic/litter-title.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <span class="top">Our</span><span class="bottom">People</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span class="top">Our</span><span class="bottom">Products</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span class="top">Our</span><span class="bottom">Story</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span class="top">Our</span><span class="bottom">News</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span class="top">Our</span><span class="bottom">Contact</span>
                    </a>
                </li>
                <li class="special last">
                    <a id="homeSearch" href="javascript:;"></a>
                </li>
            </ul>
        </div>
        <div class="video-btn">
            <a id="video-control" class="play" href="javascript:;">
                <img class="play-img" src="../asset/images/basic/play.png" alt="">
                <img class="pause-img" src="../asset/images/basic/pause.png" alt="">
                <span>Play Our Video</span>
            </a>
        </div>
    </div>
    <div class="home-mask"></div>
    <div class="home-video">
        <video
                width="100%"
                height="100%"
                id="home-video"
                class="video-js"
                controls
                preload="auto"
                poster=""
                data-setup='{}'>
            <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
            <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
            <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>
    <div id="home-video-img" class="home-video-img" style="background: url(../asset/images/kai.jpg)"></div>
    <div class="home-news" id="home-news">
        <div class="home-news-item">
            <div class="home-news-title">Our news shop in beautiful italy</div>
            <div class="home-news-des">
                news description news description news description news description news description news description
            </div>
            <div class="home-news-btn">
                <a href="">
                    <img src="../asset/images/basic/more.png" alt="">
                    <span>Read More Our News</span>
                </a>
                <a id="dismissHomeNews" href="javascript:;">
                    <img src="../asset/images/basic/close.png" alt="">
                    <span>Dismiss</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!---搜索--->
<div id="search" class="search">
    <div class="search-cont">
        <form class="search-from">
            <input type="text">
            <button class="search-btn">搜索</button>
        </form>
        <div class="search-list" id="search-list">
            <div id="scrollList">
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<script src="../asset/vendor/jquery.min.js"></script>
<script src="../asset/vendor/video/video.min.js"></script>
<script src="../asset/vendor/jquery.slimscroll.min.js"></script>
<script src="../asset/js/main.js"></script>
<script>
    $(function(){

        //首页视频
        var player = videojs('home-video',{
            controls: false,
            autoplay: false,
            preload: "auto",
            loop: false,
            controlBar: {
                captionsButton: false,
                chaptersButton: false,
                playbackRateMenuButton: true,
                LiveDisplay: true,
                subtitlesButton: false,
                remainingTimeDisplay: true,

                progressControl: true,

                volumeMenuButton: {
                    inline: false,
                    vertical: true
                },
                fullscreenToggle: true
            }
        });
        var play = false;
        $("#video-control").on("click",function(){
            if( !play ){
                $(this).removeClass("play").addClass("pause");
                player.play();
                $("#home-video-img").hide();
            }else{
                player.pause();
                $(this).removeClass("pause").addClass("play");
            }
            play = !play;
        });

        //推荐新闻的忽略
        $("#dismissHomeNews").on("click",function(){
            $("#home-news").stop().animate({
                opacity:0,
                right:-600
            },400,function(){
                $("#home-news").remove();
            })
        });


        //首页搜索
        var homeNav = $("#homeNav");
        $("#homeSearch").on("click",function(){
            if( $(this).hasClass("active") ){
                $("#search").hide();
                $(this).removeClass("active");
                homeNav.removeClass("active");
                homeNav.stop().animate({
                    top: 388
                },400);
            }else{
                $(this).addClass("active");
                homeNav.addClass("active");
                homeNav.stop().animate({
                    top: 0
                },400,function(){
                    $("#search").fadeIn();
                    $("#scrollList").slimScroll({
                        height: $("#search-list").height(),
                        scrollTo: '0px'
                    });
                });
            }
        })


    })
</script>
</body>
</html>